<template>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
        <svg-icon style="font-size:20px;color:#fff;" icon-class="language" />
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="en" :disabled="currentCmd === 'en' ">English</el-dropdown-item>
      <el-dropdown-item command="zh" :disabled="currentCmd === 'zh' ">中文</el-dropdown-item>
      <el-dropdown-item command="ja" :disabled="currentCmd === 'ja' ">日本語</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
    data() {
        return {
            currentCmd: localStorage.getItem('lang') || 'zh'
        }
    },
    methods: {
        handleCommand (cmd) {
            this.currentCmd = cmd
            // 为了切换当前i18n的语言环境
            this.$i18n.locale = cmd
            // 把选择的语言环境给保存到本地
            localStorage.setItem('lang', cmd)
            // 手动刷新
            location.reload()
        }
    }
}
</script>

<style></style>
